<template>
  <div class="app" >
   <MyHead @add="handleAdd"></MyHead>
   <YouBody :list="list"  @Del="handleDel"></YouBody>
   <MyFoot :list="list" @Delete="handleDelete"></MyFoot>
  </div>
</template>
<style>

</style>
<script>
import MyHead from './components/MyHead.vue'
import YouBody from './components/YouBody.vue';
import MyFoot from './components/MyFoot.vue' 
//渲染功能 : 1. 提供数据 提供在App中 
//2. 通过父传子
//watch 深度监视list变化
export default {
  name:'App',
  components:{
    MyHead:MyHead,
MyFoot:MyFoot,
    YouBody:YouBody
  },
 data(){
  return {
    list:JSON.parse(localStorage.getItem('list')) || [ {id : '1',name :'跑步一公里'},
                    { id: '2', name: '跳绳200' },
                    { id: '3', name: '游泳一公里' }]
  }
 },
 methods:{
  handleAdd(todoName){
    this.list.unshift({
      id: +new Date(),
      name: todoName
    })
  },
  handleDel(id){
    
   this.list=this.list.filter(item => item.id !==id)
  },
  handleDelete(){
    this.list=''
  }
 },
 watch:{
  list:{
    deep :true,
    handler (newValue){
      localStorage.setItem('list',JSON.stringify(newValue))
    }
  }
 }
}
</script>